<template>
  <div class="questionBox">
    <el-form ref="questionForm" :model="questionForm" :rules="questionRules" label-width="100px">
      <el-form-item label="题目">
        <el-input
          v-model="questionForm.topic"
          :rows="2"
          type="textarea"
          placeholder="请添加题目"
          style="width:60%"
        />
        <i class="el-icon-edit-outline topicIcon" @click="showEditDialog" />
      </el-form-item>
      <el-form-item label="答案">
        <el-input
          v-model="questionForm.pitchOn"
          :rows="2"
          type="textarea"
          placeholder="请添加答案"
          style="width:60%"
        />
      </el-form-item>
      <el-form-item label="题目解析">
        <tinymce :height="200" v-model="questionForm.analysis" style="width:60%" />
      </el-form-item>
      <el-form-item label="媒体解析">
        <tinymce :height="200" :toolbar="toolbar" v-model="questionForm.media" style="width:60%" />
      </el-form-item>
      <el-form-item label="章">
        <el-select v-model="questionForm.chapter" placeholder="请选择章" @change="chapterSearch">
          <el-option
            v-for="item in chapterOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="节">
        <el-select v-model="questionForm.section" placeholder="请选择节" @change="sectionSearch">
          <el-option
            v-for="item in sectionOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="考点">
        <el-select v-model="questionForm.checkPoint" placeholder="请选择考点" @change="checkpointSearch">
          <el-option
            v-for="item in checkpointOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="难度">
        <el-radio-group v-model="questionForm.difficulty">
          <el-radio label="easy">简单</el-radio>
          <el-radio label="ordinary">一般</el-radio>
          <el-radio label="difficulty">困难</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div class="flootBtn">
      <el-button v-if="source!=='audit'" type="primary">保存</el-button>
      <el-button v-if="source!=='audit'" type="primary">提交审核</el-button>
      <el-button v-if="source=='audit'" type="primary">审核通过继续审核</el-button>
      <el-button v-if="source=='audit'" type="primary">审核不通过继续审核</el-button>
      <el-button>取消</el-button>
    </div>
    <!-- 编辑弹框 -->
    <el-dialog :visible.sync="editDialog" title="编辑" width="50%">
      <tinymce :height="250" v-model="description" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialog = false">取 消</el-button>
        <el-button type="primary" @click="editDialog = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Tinymce from '@/components/Tinymce'
export default {
  components: {
    Tinymce
  },
  data() {
    return {
      source: '',
      toolbar: ['media'],
      editDialog: false,
      description: '',
      questionForm: {
        topic: '',
        pitchOn: '',
        media: '',
        analysis: '',
        chapter: 'noLimit',
        section: 'noLimit',
        checkPoints: '',
        difficulty: 'easy',
      },
      questionRules: {
        topic: [{ required: true, message: '请添加题目', targger: 'blur' }]
      },
      chapterOptions: [
        {
          label: '不限制',
          value: 'noLimit'
        },
        {
          label: '第一章',
          value: 'firstChapter'
        }
      ],
      sectionOptions: [
        {
          label: '不限制',
          value: 'noLimit'
        },
        {
          label: '第一节',
          value: 'firstSection'
        }
      ],
      checkpointOptions: [
        {
          label: '语文基础',
          value: 'basic'
        }
      ],
    }
  },
  created() {
    this.source = this.$route.query.click
    console.log(this.source)
  },
  methods: {
    // 显示编辑弹框
    showEditDialog() {
      this.editDialog = true
    },
    // 删除选项
    choiceDelete(index) {
      this.questionForm.options.splice(index, 1)
    },
    chapterSearch() { },
    sectionSearch() { },
    checkpointSearch() { },
  }
}
</script>
<style lang="scss" scoped>
.questionBox {
  padding: 20px;
  .topicIcon {
    font-size: 30px;
  }
  .choiceIcon {
    font-size: 20px;
  }
  .flootBtn {
    text-align: center;
    margin: 20px;
  }
}
</style>
